import React from 'react';
import './index.css'
import { Outlet, NavLink } from 'react-router-dom';
import { Swiper } from 'react-vant';
import 'react-vant/lib/index.css';
import useCityReducer from '../Reducer';

const Index = () => {
    const {state} = useCityReducer()
    return (
        <div >
            <div className='city'><NavLink to='/city'>{state.city}</NavLink></div>
            <Swiper className="my-swipe" autoplay={3000}>
                <Swiper.Item><img src='https://static.maizuo.com/v5/upload/b7c056fa2ec0df3702b526f7535ab493.jpg?x-oss-process=image/quality,Q_70' alt=""></img> </Swiper.Item>
                <Swiper.Item><img src='https://static.maizuo.com/v5/upload/f6cc1510a17ce3d424fac9a88c87db03.jpg?x-oss-process=image/quality,Q_70' alt=""></img> </Swiper.Item>
                <Swiper.Item><img src='https://static.maizuo.com/v5/upload/7572cf53619677bedf1a657b0d295afc.jpg?x-oss-process=image/quality,Q_70' alt=""></img> </Swiper.Item>
            </Swiper>

            <div className='movieTitle'>
                <div><NavLink to="/movie/hots">正在热映</NavLink></div>
                <div><NavLink to="/movie/news">即将上映</NavLink></div>
            </div>
            <Outlet></Outlet>
        </div>
    );
}

export default Index;
